// 引入监听是否进入视口
import { useIntersectionObserver } from '@vueuse/core'
export default {
  install (app) {
    // 图片懒加载 全局自定义指令
    // 需要拿到main.js中由createApp方法产出的app实例对象
    app.directive('imgLazy', {
      mounted (el, binding) {
        // el:img dom对象
        // binding.value  图片url地址
        // 使用vueuse/core提供的监听api 对图片dom进行监听 正式进入视口才加载
        // img.src = url
        // 监听此时的dom对象是否进入了视口
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }], observerElement) => {
          // 判断如果图片进入视口为ture后
          // console.log(isIntersecting)
          if (isIntersecting) {
            el.src = binding.value
            // 停止视口监听事件
            stop()
          }
        })
      }

    })
  }
}
